import { useLoaderData } from 'react-router-dom'
import styles from '../css/HotCity.module.css'

function HotCity(props) {
  const loaderData = useLoaderData()

  return (
    <div className={styles.box}>
      <div className={styles.title}>热门城市</div>
      <ul className={styles.list}>
        {loaderData.hot.map((item, i) => (
          <li
            key={i}
            onClick={() => {
              console.log(item.name)
              props.myfn(item.name)
            }}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default HotCity
